<template>
  <div style="display: flex;margin-left:250px;margin-top:20px;margin-right:350px">
    <!-- 左侧图标栏 -->
    <div style="margin-right:90px;margin-top:200px;height:200px">
    <svg-icon icon-class='heart-solid'
         :style="{color: Number(article.isLiked) === 0 ? '#666666' : 'red', width: '30px', height: '30px'}" 
         @click="handleLike($event)"></svg-icon>
         <span style="font-size: 13px; color: #999;">点赞</span>
    <i class= 'el-icon-star-on'
    :style="{color: Number(article.isFavorite) === 0 ? '#666666' : '#ff6600',fontSize: '35px',marginTop:'40px'}"
    @click="handleFavorite($event)" ></i>
    <span style="font-size: 13px; color: #999;">收藏</span>
    </div>
   <div>
  <h1 style="font-size: 28px; margin-bottom: 10px;color:#4D4F53">{{article.title}}</h1>
  <span style="font-size: 16px; color: #999; margin-right: 30px;margin-top:50px">来源: {{article.source}}</span>
  <span style="font-size: 16px; color: #999; margin-right: 30px;">发布时间: {{article.createTime}}</span>
  
  <div v-html="article.content">

  </div>
</div>
  </div>
</template>

<script>
import{getArticleDetail,likeOrUnlikeArticle,FavoriteOrUnFavorite}from '@/api/article'
export default {
    data() {
        return {       
            article:{
                id:'',
                title:'',
                resource:'',
                createTime:'',
                isLiked:'',
                isFavorite:'',
                content:''
            }
            }
    },methods:{
        //点赞
      handleLike(event) {
      // 阻止事件冒泡
      event.stopPropagation();
      // 切换 isLiked 的状态
      this.article.isLiked = !this.article.isLiked;
      const status=this.article.isLiked ? 1 : 0//1表示点赞 0表示取消点赞
      //请求后端处理点赞和取消点赞
      const param={"id":this.$route.query.id,"status":Number(status)}
      likeOrUnlikeArticle(param).then(res=>{
        if(res.data.code===1){
          this.$message.success(status===1?"点赞成功":"点赞已取消")
        }
      })
      },
      //收藏
      handleFavorite(event) {
      // 阻止事件冒泡
      event.stopPropagation();
      // 切换 isFavorite 的状态
      this.article.isFavorite= !this.article.isFavorite
       const status=this.article.isFavorite ? 1 : 0//1表示收藏 0表示取消收藏
      //请求后端处理收藏和取消收藏
      const param={"id":this.$route.query.id,"status":Number(status)}
      FavoriteOrUnFavorite(param).then(res=>{
        if(res.data.code===1){
        this.$message.success(status===1?"收藏成功":"收藏已取消")
        }
      })
      }
    } ,created(){
    //从url中获取id
    this.article.id= this.$route.query.id
    getArticleDetail(this.article.id).then(res=>{
        if(res.data.code===1){
            this.article=res.data.data
        }
    })
    }
    
}
</script>

<style>
  .fixed-icons {
    margin-top: 0;
    left: 20px;
    width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .icon {
    margin-bottom: 20px;
  }
</style>